<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>invest</title>
<link rel="stylesheet" type="text/css" th:href="@{css/style.css}">
<!-- <link rel="stylesheet/less" type="text/css" href="css/style.less" /> -->
<script type="text/javascript" th:src="@{js/jquery-1.7.2.min.js}"></script>
<script type="text/javascript" th:src="@{js/all.js}"></script>
<!--[if IE 6]> 
<script th:src="@{js/iepng.js}" type="text/javascript"></script>
<script type="text/javascript">
   EvPNG.fix('div, ul, img, li, input,span, p');
</script>
<![endif]-->
</head>
<body>

<div class="invest_con_wper" id ="app">
	  <div class="invest_con px1000">
	  	     <div class="product_choose">
	  	     	    <h2 class="product_tit clearfix">
	  	     	       <em class="proall fl">全部理财产品</em>
	  	     	       <div class="clearfix fl">
	  	     	       <span class="product_curspan" v-on:click="modifyType('官标')"><img src="images/invest_pic01.png">官标</span>
	  	     	       <span  v-on:click="modifyType('散标')"><img src="images/invest_pic02.png"> 散标</span>
	  	     	       <span  v-on:click="modifyType('债权转让')"><img src="images/invest_pic03.png"> 债权转让</span>
	  	     	       </div>
	  	     	      
	  	     	    </h2>
	  	     	    <div class="product_box">
	  	     	    	  <div class="product_list">
	  	     	    	  	     <div class="invest_prochoose">
				  	       	      <p><span>项目期限：</span><a href="javascript:void(0);" @click="queryDate(0,0)" class="inpro_cura">不限</a><a href="javascript:void(0);" @click="queryDate(1,3)" >1-3个月</a>
									  						 <a href="javascript:void(0);" @click="queryDate(4,6)" >4-6个月</a>
				  	       	      <p><span>项目年收益：</span><a href="javascript:void(0);" class="inpro_cura" @click="queryRate(1,1)">不限</a><a href="javascript:void(0);" @click="queryRate(0,10)">10%以下</a>
									  						<a href="javascript:void(0);" @click="queryRate(5,7)" >5%-7%</a><a href="javascript:void(0);" @click="queryRate(7,9)">7%-9%</a><a href="javascript:void(0);" @click="queryRate(9,10)">9%-10%</a></p>
						  </div>
	  	     	    	  </div>
	  	     	    	  <!--  -->
	  	     	    	  <div class="product_list" style="display:none;">
							  <div class="invest_prochoose">
								  <p><span>项目期限：</span><a href="javascript:void(0);" class="inpro_cura" @click="queryTime(0,0)">不限</a><a href="javascript:void(0);" @click="queryTime(0,6)">小于6个月</a>
									  						 <a href="javascript:void(0);" @click="queryTime(6,12)">6-12个月</a><a href="javascript:void(0);" @click="queryTime(12,24)">12-24个月</a>
									     					 <a href="javascript:void(0);" @click="queryTime(24,36)">24-36个月</a></p>
								  <p><span>项目状态：</span><a href="javascript:void(0);" class="inpro_cura" @click="queryStatus2(15)">不限</a>
									  						 <a href="javascript:void(0);" @click="queryStatus2(4)">正在招标的借款</a><a href="javascript:void(0);" @click="queryStatus2(5)">已完成借款</a></p>
								  <p><span>项目类型：</span><a href="javascript:void(0);" class="inpro_cura" @click="queryloanmode('')">不限</a><a href="javascript:void(0);" @click="queryloanmode('信用')">信用标</a>
									  						 <a href="javascript:void(0);" @click="queryloanmode('车辆抵押')">车抵押标</a><a href="javascript:void(0);" @click="queryloanmode('房屋抵押')">房抵押标</a></p>
							  </div>
	  	     	    	  </div>
	  	     	    	  <!--  -->
	  	     	    	  <div class="product_list" style="display:none;">
	  	     	    	  	  3
	  	     	    	  </div>
	  	     	    	  <!--  -->

	  	     	    </div>
	  	     </div>
	  	     <!-- end block -->
	  	    <h3 class="sort_tit mt30"><em>排序</em>
	  	    <span>综合排序</span>
	  	    <span>收益率<img th:src="@{images/invest_jiantou.png}" alt=""></span>
	  	    <span>发布时间<img th:src="@{images/invest_jiantou.png}" alt=""></span>
	  	    <span>项目期限<img th:src="@{images/invest_jiantou.png}" alt=""></span>
	  	    </h3>
	  	    <div v-if="type=='官标'" class="product_list mt20" v-for="Officiallogo in OfficiallogoList">
	  	    	     <div class="prolist_one prolist_one_bl01 mt20">
	  	    	           <h2 class="prolist_one_tit"><span>抵押</span>{{Officiallogo.productname}}
                           </h2>
                           <ul class="prolist_one_ul clearfix">

                           	   <li>
                           	   	   年华收益：<strong>{{Officiallogo.incomerate}}%</strong><br>
                           	   	   还款方式：<span v-if="Officiallogo.waytoreturnmoney==109">到期一次性回款</span>
								   <span v-if="Officiallogo.waytoreturnmoney==110">每月提取，到期退出</span>
                           	   </li>
                           	   <li>
                                    保障机构：亿人财富担保有限公司
                           	   </li>
							   <li class="prolist_press">
								   产品起投金额：<strong>{{Officiallogo.prolowerinvest}}</strong> 元 <br>
								   产品起投期限：<strong >{{Officiallogo.lowertimelimit}}个月</strong>
							   </li>

                           	   <li class="prolist_btn">
                           	   	    <button @click="gochanpin(Officiallogo.proid)" class="pro_btn">立即投资</button>
                           	   </li>
                           </ul>
	  	             </div>
			</div>
		  <div v-if="type=='散标'" class="product_list mt20" v-for="Looselabe in LooselabelList">
			  <!-- end one -->
			  <div class="prolist_one prolist_one_bl01 mt20">
				  <h2 class="prolist_one_tit"><span>{{Looselabe.loanmode}}}</span>{{Looselabe.projectnumber}}期
				  </h2>
				  <ul class="prolist_one_ul clearfix">
					  <li>
						  年华收益：<strong>{{(Looselabe.incomerate*36600).toFixed(2)}}%</strong><br>
						  还款方式：{{Looselabe.repaymentmethod}}
					  </li>
					  <li>
						  期数：<i>{{Looselabe.periods}}</i>期<br>
						  保障机构：亿人财富担保有限公司
					  </li>
					  <li class="prolist_press">
						  共募集金额：<strong>{{Looselabe.debtormoney}}</strong> 元 <br>
						  认购进度：<span class="ui-progressbar-mid ui-progressbar-mid-100">{{(Looselabe.transferredamount/Looselabe.debtormoney*100).toFixed(2)}}%</span>
					  </li>
					  <li class="prolist_btn" v-if="Looselabe.status==4">
						  <a  @click="gosize(Looselabe.labelid)" class="pro_btn">立即投资</a>
					  </li>
					  <li class="prolist_btn" v-if="Looselabe.status==5">
						  <a href="javascript:void(0);" class="pro_btn pro_btnbg02">已完成</a>
					  </li>
				  </ul>
			  </div>
		  </div>
	  </div>
</div>
<script th:src="@{js/vue.js}"></script>
<script>
	let vue = new Vue({
		el:"#app",
		data:{
			nowPage:1,
			maxPage:4,
			LooselabelList:[],
			Looselabel:{
				time1:0,
				time2:0,
				status:15,
				loanmode:""
			},
			OfficiallogoList:[],
			Officiallogo:{
				time1:0,
				time2:0,
				rate1:1,
				rate2:1,
			},
			type:"官标",
		},
		methods:{
				modifyType(name){
					vue.type=name;
					vue.queryOfficiallogo();
				},queryDate(time1,time2){
					vue.Officiallogo.time1=time1;
					vue.Officiallogo.time2=time2;
					vue.queryOfficiallogo();
				},queryRate(rate1,rate2){
					vue.Officiallogo.rate1=rate1;
					vue.Officiallogo.rate2=rate2;
					vue.queryOfficiallogo();
				},queryOfficiallogo() {
					if (vue.type == "官标") {
						var fficiallogos = vue.Officiallogo;
						$.ajax({
							url: "[[@{/Officiallogo/query}]]",
							data: {
								"time1": fficiallogos.time1,
								"time2": fficiallogos.time2,
								"status": fficiallogos.status,
								"rate1": fficiallogos.rate1,
								"rate2": fficiallogos.rate2,
								"nowPage": vue.nowPage,
								"maxPage": vue.maxPage,
							},
							type: "post",
							dataType: "json",
							success: function (data) {
								vue.OfficiallogoList = data.data.list;
								console.log(data)
							}
						})
					}else if(vue.type == "散标") {
						var fficiallogos = vue.Looselabel;
						$.ajax({
							url: "[[@{/Officiallogo/queryLooselabe}]]",
							data: {
								"time1": fficiallogos.time1,
								"time2": fficiallogos.time2,
								"status": fficiallogos.status,
								"nowPage": vue.nowPage,
								"maxPage": vue.maxPage,
								"loanmode":fficiallogos.loanmode
							},
							type: "post",
							dataType: "json",
							success: function (data) {
								vue.LooselabelList = data.data.list;
								console.log(vue.LooselabelList)
							}
						})
					}
				},
				queryTime(time1,time2){
						vue.Looselabel.time1=time1;
						vue.Looselabel.time2=time2;
					vue.queryOfficiallogo();
				},
				queryStatus2(status){
					vue.Looselabel.status=status;
					vue.queryOfficiallogo();
				},
				queryloanmode(loanmode){
					vue.Looselabel.loanmode=loanmode;
					vue.queryOfficiallogo();
				},
			gochanpin(id){
				$.ajax({
					url: "[[@{/pro/go}]]",
					data: {
						"id": id,
					},
					type: "get",
					dataType: "json",
					success: function (data) {
						if(data!=0){
						    console.log(data)
                            let url="[[@{/generate2/we.html?id=}]]";
						    url+=data;
							window.location.href=url;
						}else{

						}
					}
				})
			},gosize(id){
				url="[[@{/LooseLabelWEB/queryOne/}]]"+id;
				window.location=url;
			}
			}
	})

	vue.queryOfficiallogo();
</script>
</body>
</html>